<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>父节点和子节点</title>
<!-- 		4.制作4个嵌套DIV ，要求：
		      1.每个父DIV尺寸必须大于子DIV
		      2.实现每个DIV在父DIV正中间
		      3.每个DIV至少要包含一个非DIV元素，比如：文字，P标签，A标签，图片等
		      
			....
		       -->
			  <style type="text/css">
				*{
					margin: auto;
				}
			  	#div1{
					width: 400px;
					height: 400px;
					background-color: aqua;
					}
				#div2{
					width: 300px;
					height: 300px;
					background-color: orange;	
					margin: 0 auto;
					display:block;
				}
				#div3{
					width: 200px;
					height: 200px;
					background-color: yellow;
					margin: 0 auto;
					display:block;
				}
				#div4{
					width: 100px;
					height: 100px;
					background-color: pink;
					margin: 0 auto;
					display:block;
				}
			  </style>
	</head>
	<body>
		<div id="div1">
			这是一段div文字
			<div id="div2">
				<p>这是一个P标签</p>
				<div id="div3">
					<a>这是一个A标签</a>
					<div id="div4">
						<img  width="80px" height="80px" src="./img/中东悍匪.webp" >
					</div>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		// 4.通过最底层DIV，打印每层父DIV，如：
		// 1级父元素为（），1级父节点为（）

		var divobj = document.getElementById('div4')
		console.log(divobj.parentElement.parentElement.parentElement)
		console.log(divobj.parentNode.parentNode.parentNode)
		// 2级父元素为（），2级父节点为（）
		console.log(divobj.parentElement.parentElement)
		console.log(divobj.parentNode.parentNode)
		
		// 5.查找每个DIV的子元素和子节点
		console.log(divobj.innerHTML)
		console.log(divobj.innerText)
		var div2obj = document.getElementById('div1')
		console.log(div2obj.children)
		console.log(div2obj.childNodes)
		var div3obj = document.getElementById('div2')
		console.log(div3obj.innerHTML)
		console.log(div3obj.innerText)
		var div4obj = document.getElementById('div3')
		console.log(div4obj.children)
		console.log(div4obj.childNodes)
	</script>
</html>
